﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="WebSite.test1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5示例</title>
    <style type="text/css">
        #container
        {
            border: 1px solid #ccc;
            width: 800px;
            height: 600px;
            position: relative;
        }

        canvas
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <select id="tools">
        <option value="铅笔">铅笔</option>
        <option value="line">直线</option>
        <option value="rect">矩形</option>
        <option value="circle">圆形</option>
        <option value="ellipse">椭圆</option>
    </select>
    <div id="container">
        <canvas id="canvas" width="800" height="600"></canvas>
        <canvas id="canvas_temp" style="z-index: 2;" width="800" height="600"></canvas>
    </div>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var _canvas = document.getElementById('canvas_temp');
        var _context = _canvas.getContext('2d');
        var tools = document.getElementById('tools');

        tools.onchange = function (e) {
            tool[this.value]();
        };
        var tool = {
            "铅笔": function () {
                this.reset();
                var isPainting = false;
                _canvas.onmousedown = function (e) {
                    _context.moveTo(e.layerX, e.layerY);
                    isPainting = true;

                };
                _canvas.onmousemove = function (e) {
                    if (isPainting) {
                        _context.lineTo(e.layerX, e.layerY);
                        _context.stroke();
                    }                    
                };
                _canvas.onmouseup = function (e) {
                    isPainting = false;
                    //_canvas.onmousemove = null;
                    //_canvas.onmouseup = null;
                    tool.updata();
                };
            },
            line: function () {
                this.reset();
                _canvas.onmousedown = function (e) {
                    var _e = e;
                    _canvas.onmousemove = function (e) {
                        _context.clearRect(0, 0, canvas.width, canvas.height);
                        _context.beginPath();
                        _context.moveTo(_e.layerX, _e.layerY);
                        _context.lineTo(e.layerX, e.layerY);
                        _context.stroke();
                        _context.closePath();
                    };
                    _canvas.onmouseup = function (e) {
                        _canvas.onmousemove = null;
                        _canvas.onmouseup = null;
                        tool.updata();
                    };
                }
            },
            rect: function () {
                this.reset();
                _canvas.onmousedown = function (e) {
                    var _e = e;
                    _context.strokeStyle = "#000";
                    _canvas.onmousemove = function (e) {
                        _context.clearRect(0, 0, canvas.width, canvas.height);
                        _context.strokeRect(_e.layerX, _e.layerY, e.layerX - _e.layerX, e.layerY - _e.layerY);
                    };
                    _canvas.onmouseup = function (e) {
                        _canvas.onmousemove = null;
                        _canvas.onmouseup = null;
                        tool.updata();
                    };
                }
            },
            circle: function () {
                this.reset();
                _canvas.onmousedown = function (e) {
                    var _e = e;
                    _canvas.onmousemove = function (e) {
                        _context.clearRect(0, 0, canvas.width, canvas.height);
                        _context.beginPath();
                        _context.arc(_e.layerX, _e.layerY, e.layerX - _e.layerX, 0, Math.PI * 2, true);
                        _context.stroke();
                        _context.closePath();
                    };
                    _canvas.onmouseup = function (e) {
                        _canvas.onmousemove = null;
                        _canvas.onmouseup = null;
                        tool.updata();
                    };
                }
            },
            ellipse: function () {
                this.reset();
                _canvas.onmousedown = function (e) {
                    var _e = e;
                    _canvas.onmousemove = function (e) {
                        var st = 0;
                        _context.clearRect(0, 0, canvas.width, canvas.height);
                        _context.beginPath();
                        _context.moveTo(_e.layerX + (e.layerX - _e.layerX) * Math.cos(st), _e.layerY + (e.layerX - _e.layerX) * Math.sin(st));
                        st += 1 / 180 * Math.PI;
                        for (var i = 0; i < 360; i++) {
                            _context.lineTo(_e.layerX + (e.layerX - _e.layerX) * Math.cos(st), _e.layerY + (e.layerY - _e.layerY) * Math.sin(st));
                            st += 1 / 180 * Math.PI;
                        }
                        _context.stroke();
                        _context.closePath();
                    };
                    _canvas.onmouseup = function (e) {
                        _canvas.onmousemove = null;
                        _canvas.onmouseup = null;
                        tool.updata();
                    };
                }
            },
            reset: function () {
                _canvas.onmousedown = null;
                _canvas.onmouseup = null;
                _canvas.onmousemove = null;
            },
            updata: function () {
                context.drawImage(_canvas, 0, 0);
                _context.clearRect(0, 0, canvas.width, canvas.height);
            }
        };
        tool['铅笔']();
    </script>
</body>
</html>
